<template>
  <div class="resume-container">
    <div class="resume card-shadow max-w-2xl mx-auto bg-white">
      <!-- 个人基本信息 -->
      <header class="header-section p-8 border-b border-gray-100">
        <h1 class="name text-3xl font-bold text-gray-900">{{ name }}</h1>
        <p class="title text-xl text-primary mt-2">{{ title }}</p>
        <div class="contact-info flex flex-wrap gap-x-6 gap-y-2 mt-4 text-sm text-gray-600">
          <span v-if="email" class="flex items-center">
            <i class="fa fa-envelope-o mr-2"></i>{{ email }}
          </span>
          <span v-if="phone" class="flex items-center">
            <i class="fa fa-phone mr-2"></i>{{ phone }}
          </span>
          <span v-if="location" class="flex items-center">
            <i class="fa fa-map-marker mr-2"></i>{{ location }}
          </span>
          <span v-if="github" class="flex items-center">
            <i class="fa fa-github mr-2"></i>{{ github }}
          </span>
        </div>
      </header>

      <!-- 主要内容 -->
      <main class="content p-8 space-y-8">
        <!-- 教育背景（毕业生重点突出） -->
        <section class="section">
          <h2 class="section-title text-lg font-semibold text-gray-800 flex items-center">
            <span class="section-icon mr-2 text-primary">
              <i class="fa fa-graduation-cap"></i>
            </span>
            教育背景
          </h2>
          <div class="section-content mt-3 space-y-4">
            <div v-for="edu in education" :key="edu.id" class="edu-item">
              <div class="edu-header flex flex-col sm:flex-row sm:justify-between sm:items-start">
                <h3 class="edu-degree font-medium text-gray-800">{{ edu.degree }}</h3>
                <span class="edu-period text-sm text-gray-500 mt-1 sm:mt-0">{{ edu.period }}</span>
              </div>
              <p class="edu-institution text-gray-600 mt-1">{{ edu.institution }}</p>
              <p class="edu-gpa text-sm text-gray-600 mt-1" v-if="edu.gpa">
                <span class="font-medium">GPA: </span>{{ edu.gpa }}
              </p>
              <div v-if="edu.courses.length" class="edu-courses mt-2">
                <p class="text-sm font-medium text-gray-700">相关课程:</p>
                <p class="text-sm text-gray-600">{{ edu.courses.join('，') }}</p>
              </div>
            </div>
          </div>
        </section>

        <!-- 实习经历 -->
        <section v-if="internships.length" class="section">
          <h2 class="section-title text-lg font-semibold text-gray-800 flex items-center">
            <span class="section-icon mr-2 text-primary">
              <i class="fa fa-briefcase"></i>
            </span>
            实习经历
          </h2>
          <div class="section-content mt-3 space-y-6">
            <div v-for="intern in internships" :key="intern.id" class="intern-item">
              <div class="intern-header flex flex-col sm:flex-row sm:justify-between sm:items-start">
                <h3 class="intern-position font-medium text-gray-800">{{ intern.position }}</h3>
                <span class="intern-period text-sm text-gray-500 mt-1 sm:mt-0">{{ intern.period }}</span>
              </div>
              <p class="intern-company text-gray-600 mt-1">{{ intern.company }}</p>
              <ul class="intern-description text-gray-700 mt-2 list-disc pl-5 space-y-1 text-sm">
                <li v-for="(item, idx) in intern.description" :key="idx">{{ item }}</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 项目经验（突出在校项目） -->
        <section v-if="projects.length" class="section">
          <h2 class="section-title text-lg font-semibold text-gray-800 flex items-center">
            <span class="section-icon mr-2 text-primary">
              <i class="fa fa-code"></i>
            </span>
            项目经验
          </h2>
          <div class="section-content mt-3 space-y-6">
            <div v-for="project in projects" :key="project.id" class="project-item">
              <div class="project-header flex flex-col sm:flex-row sm:justify-between sm:items-start">
                <h3 class="project-name font-medium text-gray-800">{{ project.name }}</h3>
                <span class="project-period text-sm text-gray-500 mt-1 sm:mt-0">{{ project.period }}</span>
              </div>
              <p v-if="project.link" class="project-link text-sm text-primary mt-1">
                <a href="{{ project.link }}" target="_blank">{{ project.link }}</a>
              </p>
              <ul class="project-description text-gray-700 mt-2 list-disc pl-5 space-y-1 text-sm">
                <li v-for="(item, idx) in project.description" :key="idx">{{ item }}</li>
              </ul>
              <p v-if="project.technologies" class="project-tech text-sm text-gray-600 mt-2">
                <span class="font-medium">技术: </span>{{ project.technologies.join('，') }}
              </p>
            </div>
          </div>
        </section>

        <!-- 技能 -->
        <section v-if="skills.length" class="section">
          <h2 class="section-title text-lg font-semibold text-gray-800 flex items-center">
            <span class="section-icon mr-2 text-primary">
              <i class="fa fa-cogs"></i>
            </span>
            技能
          </h2>
          <div class="section-content mt-3 flex flex-wrap gap-2">
            <span v-for="skill in skills" :key="skill" class="skill-tag px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full hover:bg-primary hover:text-white transition-colors duration-200">{{ skill }}</span>
          </div>
        </section>

        <!-- 校园活动/荣誉 -->
        <section v-if="activities.length" class="section">
          <h2 class="section-title text-lg font-semibold text-gray-800 flex items-center">
            <span class="section-icon mr-2 text-primary">
              <i class="fa fa-trophy"></i>
            </span>
            校园活动与荣誉
          </h2>
          <div class="section-content mt-3 space-y-3">
            <div v-for="activity in activities" :key="activity.id" class="activity-item">
              <div class="activity-header flex flex-col sm:flex-row sm:justify-between sm:items-start">
                <h3 class="activity-name font-medium text-gray-800">{{ activity.name }}</h3>
                <span class="activity-period text-sm text-gray-500 mt-1 sm:mt-0">{{ activity.period }}</span>
              </div>
              <p class="activity-role text-sm text-gray-600 mt-1">{{ activity.role }}</p>
              <p v-if="activity.description" class="activity-description text-sm text-gray-700 mt-1">{{ activity.description }}</p>
            </div>
          </div>
        </section>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GraduateResume',
  data() {
    return {
      // 个人信息
      name: '李华',
      title: '计算机科学专业应届毕业生',
      email: 'lihua@example.com',
      phone: '139-0000-0000',
      location: '上海市',
      github: 'github.com/lihua',
      
      // 教育背景（重点突出）
      education: [
        {
          id: 1,
          degree: '计算机科学与技术 学士学位',
          institution: '上海交通大学',
          period: '2021 - 2025',
          gpa: '3.8/4.0 (专业前5%)',
          courses: [
            '数据结构与算法', '操作系统', '计算机网络', 
            '数据库原理', '软件工程', 'Web前端开发', '人工智能导论'
          ]
        }
      ],
      
      // 实习经历
      internships: [
        {
          id: 1,
          position: '前端开发实习生',
          company: '科技创新有限公司',
          period: '2024年7月 - 2024年9月',
          description: [
            '参与公司官网改版项目，负责页面组件开发，使用Vue.js实现响应式布局',
            '优化前端加载速度，将页面加载时间减少30%',
            '协助开发内部管理系统，实现数据可视化模块'
          ]
        }
      ],
      
      // 项目经验
      projects: [
        {
          id: 1,
          name: '在线图书商城系统',
          period: '2024年3月 - 2024年6月',
          link: 'github.com/lihua/bookstore',
          description: [
            '基于Spring Boot + Vue开发的全栈项目，实现图书展示、购物车、订单管理等功能',
            '负责前端界面开发与后端API对接，独立完成用户模块设计',
            '项目获得校级优秀毕业设计奖'
          ],
          technologies: ['Vue.js', 'Spring Boot', 'MySQL', 'Redis']
        },
        {
          id: 2,
          name: '校园二手交易平台小程序',
          period: '2023年9月 - 2023年12月',
          description: [
            '使用微信小程序开发的校园内部二手交易平台，解决学生闲置物品处理问题',
            '负责小程序前端开发，实现商品发布、搜索、聊天等核心功能',
            '上线后累计用户5000+，促成交易3000+笔'
          ],
          technologies: ['微信小程序', 'Node.js', 'MongoDB']
        }
      ],
      
      // 技能
      skills: [
        'JavaScript/HTML/CSS', 'Vue.js', 'React', 'Java', 
        'Spring Boot', 'MySQL', 'Git', 'Linux', '算法设计'
      ],
      
      // 校园活动与荣誉
      activities: [
        {
          id: 1,
          name: '全国大学生计算机设计大赛',
          period: '2023年',
          role: '团队负责人',
          description: '带领团队开发智能校园导航系统，获得全国二等奖'
        },
        {
          id: 2,
          name: '校学生会',
          period: '2022年 - 2023年',
          role: '技术部部长',
          description: '负责学生会网站维护与活动技术支持，组织编程培训5场'
        },
        {
          id: 3,
          name: '奖学金',
          period: '2021-2024年',
          role: '连续三年获得校级一等奖学金'
        }
      ]
    };
  }
};
</script>

<style scoped>
.resume-container {
  padding: 2rem 1rem;
  background-color: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.resume {
  border-radius: 8px;
  overflow: hidden;
}

.card-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
}

.title {
  color: #2c3e50;
}

.contact-info i {
  width: 14px;
  text-align: center;
}

.section-title {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

.section-icon {
  width: 20px;
  color: #2980b9;
}

.text-primary {
  color: #2980b9;
}

.skill-tag {
  transition: all 0.2s ease;
}

.edu-item, .intern-item, .project-item, .activity-item {
  padding-left: 0.5rem;
  border-left: 2px solid #e9ecef;
}

.edu-item:hover, .intern-item:hover, .project-item:hover, .activity-item:hover {
  border-left-color: #2980b9;
  transition: border-color 0.3s ease;
}

.project-link a {
  text-decoration: none;
}

.project-link a:hover {
  text-decoration: underline;
}

@media print {
  .resume-container {
    padding: 0;
    background-color: white;
  }
  
  .resume {
    box-shadow: none;
  }
  
  .header-section {
    background: white;
    border-bottom: 1px solid #ddd;
  }
  
  .skill-tag {
    border: 1px solid #ddd;
    background: white !important;
    color: #333 !important;
  }
  
  a {
    color: #333 !important;
    text-decoration: none !important;
  }
}
</style>
    